<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" :rules="formRules" label-width="200px">
      <!--添加门店-->
      <div class="common-form">修改运费模版</div>
      <el-form-item label="模版名称" prop="name"><el-input v-model="form.name" class="max-w460"></el-input></el-form-item>
      <el-form-item label="计费方式">
        <div>
          <el-radio v-model="form.method" :label="10">按件数</el-radio>
          <el-radio v-model="form.method" :label="20">按重量</el-radio>
        </div>
      </el-form-item>

      <el-form-item label="配送区域及运费">
        <el-table :data="form.rule" border style="width: 100%;">
          <el-table-column label="可配送区域">
            <template slot-scope="scope">
              <div class="area-list">
                <span v-if="scope.row.citys.length == cityCount">全国</span>
                <span v-else v-for="(province, index) in scope.row.showData" :key="index" class="pr16">
                  {{ province.name }}
                  <template v-if="!province.isAllCitys">
                    (
                    <span class="am-link-muted gray9">
                      <em v-for="(city, city_index) in province.citys" :key="city_index">
                        <span>{{ city.name }}</span>
                        <span v-if="city_index + 1 < province.citys.length">、</span>
                      </em>
                    </span>
                    )
                  </template>
                </span>
              </div>
              <a href="javascript:void(0);" @click="el = editAreaClick(scope.$index)">编辑</a>
            </template>
          </el-table-column>
          <el-table-column prop="first" :label="tableHeadName.first" width="100px">
            <template slot-scope="scope">
              <el-input v-model="scope.row['first']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="firstFee" :label="tableHeadName.firstFee" width="100px">
            <template slot-scope="scope">
              <el-input v-model="scope.row['firstFee']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="additional" :label="tableHeadName.additional" width="100px">
            <template slot-scope="scope">
              <el-input v-model="scope.row['additional']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="additionalFee" :label="tableHeadName.additionalFee" width="100px">
            <template slot-scope="scope">
              <el-input v-model="scope.row['additionalFee']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60px">
            <template slot-scope="scope">
              <a href="javascript:void(0);" @click="deleteAreaClick(scope.$index)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <div><el-button @click="addAreaClick" type="text" size="small">+点击添加可配送区域和运费</el-button></div>
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="form.sort" type="number" class="max-w460"></el-input>
        <div class="tips">数字越小越靠前</div>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper"><el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
    </el-form>

    <!--区域 -->
    <Areas v-if="show_area" :show_area="show_area" :areaModel="areaModel" :areas="options" @closeArea="closeAreaFunc"></Areas>
  </div>
</template>

<script>
import SettingApi from '@/api/setting.js';
import Areas from './dialog/Area';
import { deepClone } from '@/utils/base';
export default {
  components: {
    Areas: Areas
  },
  data() {
    return {
      /*form表单数据*/
      form: {
        deliveryId: 0,
        method: 10,
        name: '',
        sort: 1,
        rule: []
      },
      formRules: {
        name: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      /*区域数据源*/
      options: [],
      /*区域数据源*/
      optionsMap: {},
      /*区域选中的model*/
      areaModel: {
        index:0
      },
      /*显示区域选中*/
      show_area: false,
      /*表格标题名称*/
      tableHeadName: {
        first: '首件(个)',
        firstFee: '运费(元)',
        additional: '续件(个)',
        additionalFee: '续费(元)'
      },
      cityCount: 0,
      formData: []
    };
  },
  watch: {
    'form.method': function(n, o) {
      if (n == 10) {
        this.tableHeadName = {
          first: '首件(个)',
          firstFee: '运费(元)',
          additional: '续件(个)',
          additionalFee: '续费(元)'
        };
      } else {
        this.tableHeadName = {
          first: '首重(Kg)',
          firstFee: '运费(元)',
          additional: '续重(Kg)',
          additionalFee: '续费(元)'
        };
      }
    },
    'form.rule': {
      handler(val, oldVal) {},
      // 这里是关键，代表递归监听 items 的变化
      deep: true
    }
  },
  created() {
    // 取到路由带过来的参数
    this.form.deliveryId = this.$route.query.deliveryId;
    this.getData();
  },

  methods: {
    getData() {
      let self = this;
      SettingApi.toEditDelivery(
        {
          deliveryId: self.form.deliveryId
        },
        true
      )
        .then(res => {
          self.options = res.data.regionData;
          self.cityCount = res.data.cityCount;
          self.form = res.data.detail;
          self.form.rule = [];
          self.formData = res.data.formData;
          //区域转数组
          self.options.forEach(function(area) {
            self.optionsMap[area.id] = area;
            area.children.forEach(function(child) {
              self.$set(child, 'index', child.childIndex);
            });
          });
          if (!self.formData.length) return false;
          self.formData.forEach(function(form) {
            // 转换为整数型
            for (var key in form.citys) {
              if (form.citys.hasOwnProperty(key)) {
                form.citys[key] = parseInt(form.citys[key]);
              }
            }
            form['showData'] = self.getShowData({
              province: form.province,
              citys: form.citys
            });
            self.form.rule.push(form);
          });
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 格式化选中的区域id
    getShowData: function(checkedData) {
      var self = this;
      var formData = {};
      checkedData.province.forEach(function(provinceId) {
        var province = self.optionsMap[provinceId],
          citys = [],
          cityCount = 0;
        for (var cityIndex in province.children) {
          if (province.children.hasOwnProperty(cityIndex)) {
            var cityItem = province.children[cityIndex];
            if (self.inArray(cityItem.id, checkedData.citys)) {
              citys.push({
                id: cityItem.id,
                name: cityItem.name
              });
            }
            cityCount++;
          }
        }
        formData[province.id] = {
          id: province.id,
          name: province.name,
          citys: citys,
          isAllCitys: citys.length === cityCount
        };
      });
      return formData;
    },

    // 数组中是否存在指定的值
    inArray: function(val, array) {
      return array.indexOf(val) > -1;
    },

    /*添加区域*/
    addAreaClick(e) {
      this.areaModel.index = this.form.rule.length;
      this.areaModel.type = 'add';
      this.show_area = true;
    },

    /*编辑区域*/
    editAreaClick(e) {
      this.areaModel.index = e;
      this.areaModel.type = 'edit';
      this.show_area = true;
    },

    /*关闭区域选中弹窗*/
    closeAreaFunc(e) {
      let self=this;
      this.show_area = e.statu;
      if (e.type != 'confirm') {
        return;
      }
      this.options=e.this_area;

      let provinces = [];
      let citys = [];
      e.this_area.forEach(function(province,index) {
        if ((province.checked == true|| province.indeterminate == true)&&province.index.indexOf(self.areaModel.index)!=-1) {
          provinces.push(province['id']);
          province.children.forEach(function(city) {
            if (city.checked == true&&city.index==self.areaModel.index) {
              citys.push(city['id']);
            }
          });
        }
      });

      if (this.areaModel.type == 'add') {
        this.form.rule.push({
          first: '',
          firstFee: '',
          additional: '',
          additionalFee: '',
          citys: citys,
          showData: this.getShowData({
            province: provinces,
            citys: citys
          })
        });
      }
      if (this.areaModel.type == 'edit') {
        this.form.rule[this.areaModel.index]['showData'] = this.getShowData({
          province: provinces,
          citys: citys
        });
        //设置rule的region
        this.form.rule[this.areaModel.index]['citys'] = citys;
      }
      //更新表格变通做法
      this.form.rule.push([]);
      this.form.rule.pop();
    },

    /*删除*/
    deleteAreaClick(e) {
      let self = this;

      self.options.forEach(function(province) {
        if (self.inArray(province['id'], self.form.rule[e].province)) {
          province.checked = false;
          province.index = null;
        }
        province.children.forEach(function(city) {
          if (self.inArray(city['id'], self.form.rule[e].citys)) {
            city.checked = false;
            city.index = null;
          }
        });
      });

      self.form.rule.splice(e, 1);
    },

    //修改提交表单
    onSubmit() {
      let self = this;
      let form = deepClone(self.form);

      //移除showData
      form.rule.forEach(function(rule) {
        delete rule.showData;
      });

      self.$refs.form.validate(valid => {
        if (valid) {
          if (form.rule.length == 0) {
            self.$message({
              message: '请添加配送区域和运费',
              type: 'error'
            });
            return false;
          }

          for (let key in form.rule) {
            if (!form.rule[key].hasOwnProperty('first') || !(form.rule[key].first > 0)) {
              self.$message({
                message: '首件/首重不能为空',
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('firstFee') || form.rule[key].firstFee == '') {
              self.$message({
                message: '运费不能为空',
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('additional') || !(form.rule[key].additional > 0)) {
              self.$message({
                message: '续件/续重不能为空',
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('additionalFee') || form.rule[key].additionalFee == '') {
              self.$message({
                message: '续费不能为空',
                type: 'error'
              });
              return false;
            }
            form.rule[key]['region'] = form.rule[key]['citys'].join(',');
            delete form.rule[key]['citys'];
          }
          self.loading = true;
          SettingApi.editDelivery(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: '恭喜你，修改成功',
                type: 'success'
              });
              self.$router.push('/setting/delivery/index');
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    }
  }
};
</script>

<style>
.tips {
  color: #ccc;
}

.el-table__header-wrapper {
  line-height: 23px;
}

.el-table .area-list {
  font-size: 12px;
}

.el-table .area-list .province {
  padding-right: 10px;
  font-weight: bold;
}

.el-table .area-list .city {
  display: inline-block;
  white-space: nowrap;
  padding-right: 4px;
  color: #999;
}
</style>
